<template>
    <div ref="container">
    </div>
</template>
<script>

import * as monaco from 'monaco-editor'

export default {
    name: "MonacoEdit",
    data() {
        return {
            code: '',
            monacoEditor: ''
        }
    },

    props: {
        value: {
            type: String,
            default: function () {
                return ''
            }
        },
        color: {
            type: String,
            default: function () {
                return "#fff8c5"
            }
        },
        language: {
            type: String,
            default: function () {
                return 'javascript'
            }
        },
        theme: {
            type: String,
            default: function () {
                return 'vs'
            }
        },
        readOnly: {
            type: Boolean,
            default: function () {
                return false
            }
        },
        editorOptions: {
            type: Object,
            default: function () {
                return {
                    selectOnLineNumbers: true,
                    roundedSelection: false,
                    readOnly: this.readOnly, // 只读
                    cursorStyle: 'line', // 光标样式
                    automaticLayout: true, // 自动布局
                    glyphMargin: true, // 字形边缘
                    useTabStops: false,
                    fontSize: 14, // 字体大小
                    autoIndent: true, // 自动缩进
                    contextmenu: false
                }
            }
        }
    },
    mounted() {
        let vm = this;
        monaco.editor.defineTheme("selfTheme", {
            base: vm.theme,
            inherit: true,
            rules: [],
            colors: {
                'editor.lineHighlightBackground': vm.color
            }
        })
        this.monacoEditor = monaco.editor.create(this.$refs.container, {
            value: this.value,
            language: this.language,
            theme: 'selfTheme', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网 editor.lineHighlightBackground
        })
        this.monacoEditor.updateOptions(this.editorOptions)
        //编辑器内容changge事件
        this.monacoEditor.onDidChangeModelContent(function (event) {
            vm.$emit('onCodeChange', event);
        });
        vm.$emit('monacoEditor', this.monacoEditor);

    }
}
</script>

<style scoped>

</style>